<template>
  <el-card>
    <!-- 添加按钮 -->

    <el-date-picker v-model="pageobj.end_time" type="date" placeholder="选择日期时间" align="right" format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd" @change="getStoreList" style="margin-right:10px">
    </el-date-picker>
    <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus">添加材料</el-button>
    <el-button @click="handleDao">
      导出excel
    </el-button>
    <!-- 表格区域 -->
    <el-table :data="storeList" stripe style="width: 100%" id="outExcel">
      <el-table-column type="index" label="#" width="80"> </el-table-column>
      <el-table-column prop="project__name" label="项目名称"> </el-table-column>
      <el-table-column prop="modules__name" label="材料名称"> </el-table-column>
      <el-table-column prop="materials_num" label="材料数量" width="100">
      </el-table-column>
      <el-table-column prop="modules__unit" label="单位" width="80">
      </el-table-column>
      <el-table-column prop="materials_price" label="材料价格" width="100">
      </el-table-column>
      <el-table-column prop="create_time" label="最近入库时间">
        <template slot-scope="scope">
          {{ scope.row.create_time.split("T")[0] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button @click="goRegister(scope.row)" type="text" size="small">详情</el-button>
          <!-- <el-button @click="handleDel(scope.row)" type="text" size="small"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageobj.page"
      :page-sizes="[5, 10, 15, 20]" :page-size="pageobj.pagesize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加对话框 -->
    <el-dialog title="添加材料" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      :before-close="closeAndResetaddFrom">
      <el-form :model="addForm" ref="addFormRef">
        <el-form-item label="选择材料" label-width="115px" prop="modules_id">
          <el-cascader ref="Mycascader" v-model="addValue" :options="options" :props="optionsProps"
            @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="材料数量" label-width="115px" prop="materials_num">
          <el-input v-model="addForm.materials_num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="材料价格" label-width="115px" prop="materials_price">
          <el-input v-model="addForm.materials_price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAndResetaddFrom">取 消</el-button>
        <el-button type="primary" @click="addmaterials">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getStore, getAuth, postmaterials } from "@/api/store";
import outToExcel from "../../excel/outToExcel"
export default {
  data() {
    return {
      project_id: this.$route.query.id,
      pageobj: {
        page: 1,
        pagesize: 10,
        end_time: ""
      },
      total: 0,
      storeList: [],
      // 级联选择器对应数据
      addValue: [],
      options: [],
      optionsProps: {
        value: "id",
        label: "name",
        key: "pid",
      },
      // 添加表单
      addForm: {
        project_id: this.$route.query.id,
        modules_id: "",
        materials_num: "",
        materials_price: "",
      },
      dialogFormVisible: false,
    };
  },
  methods: {
    // 获取对应仓库数据
    async getStoreList() {
      if (!this.pageobj.end_time) {
        this.pageobj.end_time = ''
      }
      const res = await getStore({

        project_id: this.project_id,
        page: this.pageobj.page,
        pagesize: this.pageobj.pagesize,
        end_time: this.pageobj.end_time,
      });
      if (res.code == 200) {
        this.storeList = res.data.data;
        this.total = res.data.total;
        console.log("对应仓库数据", res);
      }
    },
    // 获取对应材料信息
    async getAuthList() {
      const res = await getAuth({
        pro_id: this.project_id,
        is_materials: 1,
      });
      if (res.code == 200) {
        this.options = res.data;
        console.log("对应材料信息", res);
      }
    },

    // 页码数量发生变化时触发
    handleSizeChange(val) {
      this.pageobj.pagesize = val;
      this.getStoreList();
    },
    // 页码发生变化时触发
    handleCurrentChange(val) {
      this.pageobj.page = val;
      this.getStoreList();
    },

    // 编辑事件
    handleEdit(row) {
      console.log(row);
    },
    // 删除事件
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 级联选择器发生变化触发
    handleChange(value) {
      let lastId = this.addValue[this.addValue.length - 1];
      this.addForm.modules_id = lastId;
      // console.log(this.$refs.Mycascader.getCheckedNodes());
    },
    // 关闭并重置添加表单
    closeAndResetaddFrom() {
      this.dialogFormVisible = false;
      this.addValue = [];
      this.addForm.modules_id = "";
      this.$refs.addFormRef.resetFields();
    },
    // 添加材料
    async addmaterials() {
      let res = await postmaterials(this.addForm);
      console.log(res);
      if (res.code == 200) {
        this.$message.success("材料添加成功");
        this.closeAndResetaddFrom();
        this.getStoreList();
      }
    },
    async goRegister() {
      this.$router.push({ path: "/register/register", query: { project_id: this.project_id } })
    },

    handleDao() {

      outToExcel.exportExcel("仓库.xlsx", "#outExcel")
    }
  },
  created() { },
  mounted() {
    this.getStoreList();
    this.getAuthList();
  },
  beforeMount() { },
};
</script>
<style scoped>
.el-pagination {
  float: right;
  margin: 20px 0;
}
</style>